<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle
        :title="title"
        :is_name="true"
        :is_back="true"
        :is_lang="false"
        :is_kf="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="container">
        <div class="box">
          <div class="itemBox">
            <ul>
              <li v-if="isMobile">
                <div class="n">{{ $t("page.doc77") }}</div>
                <div class="val flex">
                  <div class="flex1">
                    <input
                      type="text"
                      disabled
                      :placeholder="$t('page.doc58')"
                      v-model="phone"
                    />
                  </div>
                  <!-- <div class="set_area" @click="getArea"> -->
                  <div class="set_area">
                    +{{ areaId }}
                    <img src="../../assets/images/ico_la.png" alt="" />
                  </div>
                </div>
              </li>

              <li v-else>
                <div class="n">{{ $t("page3.doc5") }}</div>
                <div class="val flex">
                  <div class="flex1">
                    <input
                      type="text"
                      :placeholder="$t('page.doc46')"
                      v-model="phone"
                      readonly
                    />
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div class="itemBox">
            <ul>
              <li>
                <div class="n" v-if="isMobile">{{ $t("page.doc78") }}</div>
                <div class="n" v-else>{{ $t("page.doc78") }}</div>
                <div class="val flex">
                  <div class="flex1">
                    <input
                      type="text"
                      :placeholder="$t('page.doc36')"
                      v-model="code"
                      v-if="isMobile"
                    />
                    <input
                      type="text"
                      :placeholder="$t('page.doc36')"
                      v-model="code"
                      v-else
                    />
                  </div>
                  <div class="b" v-if="!time_show">
                    <button class="btn on" @click="send_click()">
                      {{ $t("page.doc37") }}
                    </button>
                  </div>
                  <div class="b" v-show="time_show">
                    <button>
                      <van-count-down
                        ref="countDown"
                        :time="time"
                        format="ss"
                        @finish="finish_time"
                      >
                        <template v-slot="timeData">
                          <span>{{ timeData.seconds }} <var>s</var></span>
                        </template>
                      </van-count-down>
                    </button>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="itemBox">
            <ul>
              <li>
                <div class="n">{{ $t("page.doc89") }}</div>
                <div class="val flex rel">
                  <div class="flex1">
                    <input
                      :type="registration_data.pwdType"
                      :placeholder="$t('page.doc90')"
                      v-model="password"
                    />
                  </div>
                  <div class="str abs">
                    　<img :src="registration_data.src" @click="changeType()" />
                  </div>
                </div>
                <div class="val flex rel">
                  <div class="flex1">
                    <input
                      :type="registration_data.pwdType"
                      :placeholder="$t('page.doc91')"
                      v-model="s_password"
                    />
                  </div>
                  <div class="str abs">
                    　<img :src="registration_data.src" @click="changeType()" />
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div class="bot">
            <button class="btn" @click="onBtn()">{{ $t("page.doc83") }}</button>
          </div>
        </div>
      </div>

      <van-popup v-model="if_area" position="bottom" round>
        <div class="area_pop">
          <div class="title rel">
            {{ $t("page.doc41") }}
            <div class="abs" @click="if_area = false">
              <van-icon name="cross" />
            </div>
          </div>

          <div class="so db">
            <div class="ico"></div>
            <div class="flexs">
              <input
                type="text"
                :placeholder="$t('page.doc42')"
                v-model="soAreaId"
              />
            </div>
            <div class="closes" v-if="soAreaId != ''" @click="soAreaId = ''">
              <img src="../../assets/images/ico_close.png" alt="" />
            </div>
          </div>

          <ul>
            <li
              class="db"
              v-for="(item, k) in areaData"
              :key="k"
              @click="area_set(item.mobilePrefix)"
            >
              <div class="ico"><img :src="item.iconUrl" alt="" /></div>
              <div class="flex txt">
                {{ item.name }}（+{{ item.mobilePrefix }}）
              </div>
            </li>
          </ul>
        </div>
      </van-popup>
    </template>
  </page-scroll>
</template>

<script>
const phoneReg = /^1[3-578]\d{9}$/; //大陆手机验证
const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
const mailReg = /^(\w-*\.*\+*)+@(\w-?)+(\.\w{2,})+$/; //邮箱验证

export default {
  data() {
    return {
      title: this.$t("title.doc30"),
      phone: this.$store.state.userData.email,
      password: "",
      code: "",
      time: 60 * 1000,
      time_show: false,
      time_status: false,
      registration_data: {
        pwdType: "password",
        src: require("../../assets/images/yj1.png"),
      },
      areaData: [],
      if_area: false,
      areaId: this.$store.state.areaId,
      isMobile: false,
      cid: 1,
      s_password: "",
      soAreaId: "",
    };
  },

  mounted() {
    // if(!this.$store.state.userData.hasBindMobile){
    //   this.$toast(this.$t('page2.doc2'))
    //   let url = '/my/bind_mobile'
    //   this.$router.replace({
    //     path:url,
    //     query:{
    //     }
    //   });
    // }
    // if(mailReg.test(this.phone)){
    //   this.isMobile = false
    //   this.cid = 1
    // }else{
    //   this.isMobile = true
    //   this.cid = 0
    // }
  },
  methods: {
    onBtn() {
      let re = new RegExp(reg);
      if (re.test(this.password)) {
      } else {
        this.$toast(this.$t("page.doc48"));
        return;
      }

      if (this.password != this.s_password) {
        this.$toast(this.$t("page.doc49"));
        return;
      }

      this.$post(this.URL.user.upPw, {
        accountType: this.cid, //送验证码的账号类型(0-手机 / 1-邮箱)
        prefix: this.areaId, //手机号码前缀 (accountType=0 时必填)
        account: this.phone, //手机号/邮箱
        code: this.code, //验证码 (验证码类型: 3)
        password: this.$md5(this.password),
      }).then((res) => {
        if (res.code == 0) {
          this.$toast(res.message);
          this.$router.go("-1");
        } else {
          this.$toast(res.message);
        }
      });
    },
    changeType() {
      this.registration_data.pwdType =
        this.registration_data.pwdType === "password" ? "text" : "password";
      this.registration_data.src =
        this.registration_data.src == require("../../assets/images/yj2.png")
          ? require("../../assets/images/yj1.png")
          : require("../../assets/images/yj2.png");
    },
    finish_time() {
      this.time_status = false;
      this.time_show = false;
    },
    send_click() {
      if (this.time_status) {
        this.$toast.success(this.$t("page.doc44"));
        return;
      }
      // if (this.phone.toString().length < 7 || this.phone.toString().length > 12) {
      //   this.$toast.fail(this.$t('new.doc8'));
      //   return;
      // }
      this.send_code();
    },

    send_code() {
      //判断在不在60秒内
      if (this.time_status) {
        //this.$toast("操作频繁.晚点再试");
        this.$toast.success(this.$t("page.doc44"));
      } else {
        // if (this.phone.toString().length > 6 && this.phone.toString().length < 13) {
        //   var send_api = this.URL.user.code_send;
        //   var send_arr = {
        //     accountType:this.cid,
        //     prefix:this.areaId,
        //     account: this.phone,
        //     type: 3,
        //     captchaKey:this.captchaKey,
        //     captchaCode:this.cap
        //   };
        // } else {
        //   //this.$toast("请输入正确的手机号");
        //   this.$toast.fail(this.$t('new.doc8'));
        //   return;
        // }
        if (this.cid == 0) {
          if (
            this.phone.toString().length < 6 &&
            this.phone.toString().length < 13
          ) {
            // this.$toast("请输入正确的手机号");
            this.$toast.fail(this.$t("page.doc45"));
            return;
          }
        } else {
          if (!mailReg.test(this.phone)) {
            //this.$toast(this.$t('page.doc46'));
            this.$toast.fail(this.$t("page.doc46"));
            return;
          }
        }
        var send_api = this.URL.user.code_send;
        var send_arr = {
          accountType: this.cid,
          prefix: this.areaId,
          account: this.phone,
          type: 3,
          captchaKey: this.captchaKey,
          captchaCode: this.cap,
        };

        this.$post(send_api, send_arr).then((res) => {
          if (res.code == 0) {
            this.$toast.success(res.message);
            // this.code = res.data.code
            this.time_show = true;
            this.time_status = true;
            this.$refs.countDown.reset();
            this.$refs.countDown.start();
          } else {
            this.$toast(res.message);
          }
        });
      }
    },

    area_set(id) {
      this.areaId = id;
      this.if_area = false;
    },
    getArea() {
      this.if_area = true;
      this.$post(this.URL.user.country_list, {}).then((res) => {
        if (res.code == 0) {
          this.areaData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },

    path_url(url) {
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background-color: #151515;
  min-height: 100vh;
}

.btn {
  border-radius: 0.16rem;
}

.box {
  padding-top: 0.3rem;

  ul {
    li {
      .flex1,
      .set_area {
        height: 0.8rem;
        border-radius: 0.16rem;
        padding: 0 0.3rem;
        line-height: 0.8rem;

        img {
          height: 0.1rem;
        }
      }

      p {
        margin-top: 0.16rem;
        font-size: 0.26rem;
        font-weight: 500;
        color: #cda349;
      }

      .val {
        margin-bottom: 0.05rem;
        height: 0.88rem;
        border-radius: 0.16rem;
        border: 0.02rem solid rgba(255, 255, 255, 0.1);

        &:last-child {
          margin-bottom: 0;
        }

        input {
          width: 100%;
          background: none;
          height: 0.8rem;
          border: 0;

          &::placeholder {
            font-size: 0.26rem;
          }
        }
      }

      .set_area {
        margin-left: 0.14rem;
        font-size: 0.26rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);

        img {
          vertical-align: middle;
        }
      }

      .b {
        //margin-left: 0.14rem;
        position: absolute;
        right: 0;

        button,
        img {
          height: 0.8rem;
          font-size: 0.26rem;
          font-weight: 400;
          color: #FFDD9A !important;
        }

        button {
          padding: 0 0.3rem;
          border-radius: 0;
          background: none;
          color: var(--COcolor2);
          border: 0;
        }

        span {
          color: var(--COcolor2);
        }
      }

      .str {
        right: 0.3rem;
        top: 0;
        height: 0.8rem;
        line-height: 0.8rem;

        img {
          vertical-align: middle;
          height: 0.28rem;
        }
      }
    }
  }

  .n {
    margin-bottom: 0.16rem;
    font-size: 0.26rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
  }
}

.bot {
  padding-top: 0.3rem;
}

.bot {
  padding-top: 0 !important;

  .btn {
    border-radius: 100rem !important;
    color: #000000;
  }
}

.itemBox {
  background-color: transparent;
  padding: 0;

  li {
    .n {
      color: #ffffffcc;
    }

    .flex {
      position: relative;
    }

    .val {
      border: none !important;
    }

    .flex1 {
      background-color: #181c21 !important;
    }
  }
}

.on {
  background: transparent !important;
  color: red !important;
}
</style>
